@import './variable.scss';

// 全局样式设置
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family:  Microsoft YaHei, Arial, sans-serif;
}

*:focus {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

// 路由动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

// 重置element ui弹框样式(为弹框设置高度并增加滚动条)
.el-dialog__wrapper .el-dialog {
  margin-top: 10vh !important;
}
.el-dialog__wrapper .el-dialog .el-dialog__body {
  // min-height: 500px !important;
  max-height: 60vh !important;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

// .el-dialog__header {
//   border-bottom: 1px solid #000;
// }

.el-dialog__body::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
}

.el-dialog__body::-webkit-scrollbar-track {
  border-radius: 6px;
  background-color: #eee;
}

.el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(74, 75, 78, 0.3);
  transition: .3s background-color;
}

#app {

  // 重置element ui样式
  .el-menu--inline .el-submenu__title,
  .el-submenu .el-menu-item {
    min-width: 180px !important;
    background-color: $subMenuBg !important;

    &:hover {
      background-color: $menuHover !important;
    }
  }

  // 隐藏组件el-scrollbar样式
  .el-scrollbar{
    height: 100%;
    .scrollbar-wrapper {
      overflow-x: hidden!important;
    }
  }

  .el-menu {
    border-right-width: 0px !important;
  }

  .el-menu--collapse .el-menu .el-submenu {
    min-width: 180px !important;
  }

  // 重置element ui 菜单收缩动画
  .horizontal-collapse-transition {
    // transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    transition: all 0s;
  }

  .query-box {
    vertical-align: middle;
  }

  // 查询中的select
  .query-select {
    width: 100px;
  }

  // 添加/编辑时的select
  .handle-select {
    width: 200px;
  }

  // input
  .handle-input {
    width: 200px;
    display: inline-block;
  }

  // date
  .handle-date {
    width: 200px;
  }

  .handle-datepicker {
    width: 250px;
  }

  .handle-icon {
    width: 200px;
  }

  // textarea
  .handle-textarea {
    width: 200px;
  }

  .text-button-del {
    color: #f56c6c;
  }

  .option-box {
    margin-bottom: 10px;
  }

  .pagination {
    margin: 20px 0;
    text-align: right;
  }

  .ds-content {
    display: flex;
  
    .tree-wrapper {
      width: 15%;
      min-height: 400px;
      border-right: 2px solid #f0f0f0;
    }
  
    .main-wrapper {
      width: 83%;
      padding-left: 15px;
      padding-top: 15px;
    }
  }
}
